<template>
  <div>
    <div id="sureOrder">
      <van-nav-bar title="确认订单" left-text="返回" class="custom-nav-bar" left-arrow @click-left="onClickLeft" />
      <div class="sureOrder">
        <div class="sureOrder-item">
          <div class="item-left">
            <div class="item-left-img"><img src="../../assets/icon/icon_dw1.png" alt=""></div><span>地址</span>
          </div>
          <div class="item-right" @click="pushaddress">
            {{ addressvalue }}
          </div>
        </div>
        <div class="sureOrder-item">
          <div class="item-left">
            <div class="item-left-img"><img src="../../assets/icon/icon_wuliu.png" alt=""></div><span>配送</span>
          </div>
          <div class="item-right">
            <van-radio-group v-model="checked1" direction="horizontal">
              <van-radio name="1" chexd-color="#3fa19d">免费上门取件</van-radio>
              <van-radio name="2" chexd-color="#3fa19d">自己送货</van-radio>
            </van-radio-group>
          </div>
        </div>
        <div class="sureOrder-item">
          <div class="item-left">
            <div class="item-left-img"><img src="../../assets/icon/icon_time.png" alt=""></div><span>上门</span>
          </div>
          <div class="item-right">
            <input v-model="time" readonly @click="showPopup" class="inputime">
            <van-popup class="popup" v-model:show="show" position="bottom">
              <div class="popup-head">选择预约时间
                <span @click="stopPopup">X</span>
              </div>
              <div class="popup-content">
                <van-radio-group class="radio" v-model="checked2" direction="horizontal">
                  <van-radio class="radio-item" name="3" chexd-color="#3fa19d">今天</van-radio>
                  <van-radio class="radio-item" name="4" chexd-color="#3fa19d">明天</van-radio>
                </van-radio-group>
                <div class="btn">
                  <button>8:00-10:00</button>
                  <button>10:00-12:00</button>
                  <button>12:00-14:00</button>
                  <button>14:00-16:00</button>
                  <button>16:00-18:00</button>
                  <button>18:00-20:00</button>
                </div>
              </div>
            </van-popup>
          </div>
        </div>
      </div>
      <div class="ordermsg">
        <p>订单信息</p>
        <div class="yifu-compent" v-for="item, index in Carlist" :key="index" v-if="Carlist.length > 0">
          <div class="content-middle">x1
            <div class="img"><img :src="item.pro_img" alt=""></div>
            <div class="name">{{ item.pro_title }}</div>
            <div class="price">
              ￥{{ item.pro_price }}
              <p>X{{ item.pro_num }}</p>
            </div>
          </div>
        </div>
        <!-- 没有订单页面 -->
        <div class="noorder" v-else="">
          <van-empty description="未选择订单商品">
            <van-button round type="primary" class="bottom-button" @click="gocar">去下单</van-button>
          </van-empty>
        </div>
        <!-- 没有订单页面 -->
      </div>
      <div class="orderyouhui">
        <div class="redyouhui">
          <div class="redyouhui-left">优惠卡券</div>
          <div class="redyouhui-right">{{ youhui }} <span>></span></div>
        </div>
        <div class="red-compent">
          <van-cell-group inset>
            <van-field v-model="remark" rows="2" autosize label="订单备注" type="textarea" maxlength="50"
              placeholder="请输入订单留言(选填)" show-word-limit class="message-label" />
          </van-cell-group>
        </div>
      </div>
      <div class="ordermsg">
        <div class="xieyi-item">
          <div class="xieyi-item-left">可选范围</div>
          <div class="xieyi-item-right"><img src="../../assets/icon/icon_right.png" alt=""></div>
        </div>
        <div class="xieyi-item">
          <div class="xieyi-item-left">时效&运费说明</div>
          <div class="xieyi-item-right"><img src="../../assets/icon/icon_right.png" alt=""></div>
        </div>
        <div class="xieyi-item">
          <div class="xieyi-item-left">赔偿协议</div>
          <div class="xieyi-item-right"><img src="../../assets/icon/icon_right.png" alt=""></div>
        </div>
      </div>

    </div>
    <div class="sureOrder-bottom">
      <span>共1计,合计:￥89.00</span>
      <button type="button" class="sureOrder-bottom-btn" @click="gosureorder">确认支付</button>
    </div>
  </div>
</template>
<script setup lang="ts">

import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import { Http, Token } from "../../utils/request";
import { showToast } from 'vant';
import { useStore } from 'vuex';
const store = useStore()

interface CarItem {
  pro_id: number;
  pro_img: string;
  pro_title: string;
  pro_price: number;
  ischeck: boolean;
  type_name: string;
  type_n: number;
  pro_num: number;
  pro_oldprice: number
}

const $router = useRouter();
const time = ref('请选择上门取货时间');
const addressvalue: any = ref('点击添加地址');
const checked1 = ref('1');
const checked2 = ref('3');
const youhui = ref('-￥10.00');
const remark = ref('');
const show = ref(false);
const ordershow = ref(false);

const Carlist = ref<CarItem[]>([]);


//路由跳转
const pushaddress = () => { $router.push('/address'); };
const onClickLeft = () => $router.back();

const gocar = () => {
  $router.push('/car');
};
//弹出层
const showPopup = () => {
  show.value = true;
};
const stopPopup = () => {
  show.value = false;
};
let params:any =ref([]);
// 获取订单数据
// const getOrderdata = () => {
//   let params: any[] = []; // 修复：移除 ref，直接定义数组
//   Carlist.value.forEach((item: any) => {
//     if (item.ischeck == true) {
//       params.push({
//         pro_id: item.pro_id,
//         pro_num: item.pro_num,
//         status: 0,
//         address_id: $router.currentRoute.value.query.address_id,
//         remark: remark.value
//       });
//     }
//   });
//     console.log(params);
//   // 修复：调用接口并传递参数
//   Token('/api/createorder', 'post',params).then((res: any) => {
//     if (res.status === 200) {
//       showToast({
//         message: '下单成功',
//         type: 'success'
//       });
//       $router.push({
//         path: '/orderView'
//       });
//     }
//   });
// };

// 获取购物车列表接口
const getCarlist = () => {
  Token("/api/car", "get", {}).then((res: any) => {
    if (res.status === 200) {
      Carlist.value = res.data;
      console.log(Carlist.value);
    }
  });
};

getCarlist();

onMounted(() => {
  getCarlist();
  // 地址路由守卫
  if ($router.currentRoute.value.query.address == null) {
    addressvalue.value = '点击添加地址';
  } else {
    addressvalue.value = $router.currentRoute.value.query.address;
  }
});

// 下订单接口
const gosureorder = () => {
  const params = Carlist.value.map(item => ({
    pro_id: item.pro_id,
    pro_num: item.pro_num,
    status: 0,
    address_id: $router.currentRoute.value.query.address_id,
    remark: remark.value
  }));
   console.log(params);
  if(params.length === 0){
    showToast({
      message: '请选择订单商品'
    });
  }else{
    Token('api/order', 'post', { orderJson:JSON.stringify(params)}).then((res: any) => {
    if (res.status == 200) {  
      showToast({
        message: '下单成功',
        type: 'success'
      });
      // store.commit('setActive','order')
      $router.push({
        path: '/order'
      });
    }
  });
  }
};
</script>
<style scoped lang="less">
.bottom-button{
  width: 200px;
  height: 60px;
  background-color: #3fa19d;
  color: white;
  border-radius: 10px;
}
.sureOrder-bottom {
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0;
  height: 8vh;
  background-color: #3fa19d;

  span {
    color: white;
    margin-top: 40px;
    margin-left: 20px;
    font-size: 36px;
  }

  button {
    position: fixed;
    right: 35px;
    bottom: 10px;
    padding: 15px 40px;
    border-radius: 50px;
    border: none;
    color: #3fa19d;
    height: 70px;
    line-height: 43px;
    font-weight: 600;
    background-color: white;
  }
}

.xieyi-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;

  .xieyi-item-left {
    width: 80%;
    margin-top: 10px;
    margin-left: 20px;
  }

  .xieyi-item-right {
    width: 20%;
    margin-top: 10px;
    margin-left: 20px;

    img {
      width: 40px;
      height: 40px;
      margin-left: 50px;
    }
  }
}

.content-middle {
  width: 100%;
  height: 200px;
  padding: 20px;
  border-bottom: 2px solid #ccc;
  display: flex;
  justify-content: space-between;

  .img {
    width: 150px;
    height: 150px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 15px;
    }
  }

  .name {
    width: 300px;
    font-size: 35px;
    font-weight: 500;
  }

  .price {
    p {
      text-align: end;
      color: #ccc;
      font-size: 25px;
    }
  }
}

#sureOrder {
  width: 100%;
  background-color: #ededed;
  font-weight: 400;
}

.sureOrder {
  width: 94%;
  margin: 3%;
  background-color: white;
  border-radius: 15px;
}

.sureOrder-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 28px;

  .item-left {
    width: 20%;
    padding-left: 30px;
    padding-top: 10px;

    span {
      background-color: #ff7c11;
      color: white;
      font-size: 18px;
      padding: 1px 10px;
      border-radius: 20px;
      position: relative;
      top: -20px;
      left: 2px;
    }

    .item-left-img {
      background-color: #3fa19d;
      width: 60px;
      height: 60px;
      border-radius: 50%;

      img {
        width: 40px;
        height: 40px;
        margin: 10px;
      }

    }
  }

  .item-right {
    width: 80%;
    height: 50px;
    padding-top: 25px;
    position: relative;
    font-size: 30px;

    input {
      position: absolute;
      top: 0;
      font-size: 30px;
      width: 90%;
      border: none;
    }

    .popup {
      height: 600px;
      border-radius: 50px 50px 0 0;
      padding: 30px;

      .popup-head {
        font-size: 30px;
        text-align: center;
        padding-bottom: 30px;
        border-bottom: 2px solid #ccc;
        margin-bottom: 30px;
        position: relative;

        span {
          font-size: 30px;
          position: absolute;
          right: 10px;
          color: #ccc;
        }
      }

      .popup-content {
        font-size: 30px;
        text-align: center;

        .radio {
          justify-content: center;
          margin-bottom: 50px;

          .radio-item {
            width: 130px;
            margin: 0;
          }
        }

        .btn {
          width: 95%;
          margin: 0 auto;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          button {
            width: 200px;
            height: 60px;
            margin-bottom: 50px;
            color: #3fa19d;
            background: none;
            border: 5px solid #3fa19d;
            border-radius: 50px;
          }
        }
      }
    }
  }
}

.sureOrder-item:last-child {
  align-items: center;

}


.ordermsg {
  width: 94%;
  margin: 3%;
  background-color: white;
  border-radius: 15px;
}

.van-field__input {
  color: #ff0000;
  /* 红色字体 */
}

.ordermsg {
  p {
    margin-left: 25px;
    font-weight: 600;
  }
}

.orderyouhui {
  width: 94%;
  height: 250px;
  margin: 3%;
  background-color: white;
  border-radius: 15px;
}

.redyouhui {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.redyouhui-left {
  margin-left: 25px;
  font-weight: 600;
}

.redyouhui-right {
  margin-right: 25px;
  color: #ff0000;

  span {
    color: #747474;
    font-weight: bold;
  }
}

.message-label {
  margin-left: -35px;
}

::v-deep .van-radio__icon--checked .van-icon {
  background-color: #3fa19d !important;
  /* 修改选中图标颜色 */
  border-color: #3fa19d !important;
  /* 修改选中图标边框颜色 */
}

.custom-nav-bar {
  color: #3fa19d;
}
</style>